
<!DOCTYPE html>
<html>
<head>
	<title>仿百度知道固定表头效果</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style>
        *{
        margin:0;
        padding:0;
        }
        body{
        font-size: 14px;
        font-family: '微软雅黑'
        }
        .fy-container{
        width:1004px;
        margin:0 auto;
        margin-top:100px;
        }
        @media screen and(max-width:1003px){
        .fy-container{
            width:100%;
        }
        }
        .layui-row:after, .layui-row:before {
            content: '';
            display: block;
            clear: both;
        }
        .left{
        float: left;
        }
        .right{
        float:right;
        }
        .order-module {
        width: 100%;
        height: 36px;
        margin: 30px 0;
        position: relative;
        }
        .order-module:first-child {
        margin-top: 0;
        }
        .order-module .order-left {
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        padding-right: 5px;
        z-index: 10;
        border: 1px solid #e8e9fb;
        padding: 5px;
        color: #4d9ff8;
        border-radius: 25px;
        -webkit-box-shadow: 0 0 10px #e8e9fb;
        box-shadow: 0 0 10px #e8e9fb;
        }
        .order-module .order-left .order-number {
        display: inline-block;
        width: 25px;
        height: 25px;
        text-align: center;
        border-radius: 50%;
        line-height: 25px;
        background-color: #4d9ff8;
        overflow: hidden;
        color: #fff;
        }
        .order-module .order-left .order-text {
        padding: 2px 7px;
        }
        .order-module .order-line {
        border-bottom: 1px solid #e8e9fb;
        width: 100%;
        position: absolute;
        left: 0;
        top: 18px;
        }
        .order-module.active .order-left {
        background-color: #f1f1f1;
        border: 1px solid #e8e9fb;
        color: #555;
        -webkit-box-shadow: 0 0 10px #b9d5f4;
        box-shadow: 0 0 10px #b9d5f4;
        }
        .order-module.active .order-left .order-number {
        background-color: #ccc;
        color: #fff;
        }
    </style>
</head>
<body>

	<div class="fy-container">
	
		<div id="floor0" class="order-module layui-row order-step">
            <a href="javascript:;" class="layui-row left order-left">
                <div class="order-number left">0</div>
                <div class="order-text left">选择注册类型</div>
            </a>
            <div class="order-line"></div>
        </div>
		
        <div style="margin-left:80px;">
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
			<p>选择注册类型内容部分</p>
		</div>
		<div id="floor1" class="order-module layui-row order-step">
            <a href="javascript:;" class="layui-row left order-left">
                <div class="order-number left">1</div>
                <div class="order-text left">选择注册类型1</div>
            </a>
            <div class="order-line"></div>
        </div>
        <div style="margin-left:80px;">
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
			<p>选择注册类型1内容部分</p>
		</div>
		<div id="floor2" class="order-module layui-row order-step">
            <a href="javascript:;" class="layui-row left order-left">
                <div class="order-number left">2</div>
                <div class="order-text left">选择注册类型2</div>
            </a>
            <div class="order-line"></div>
        </div>
        <div style="margin-left:80px;">
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
			<p>选择注册类型2内容部分</p>
		</div>
		<div id="floor3" class="order-module layui-row order-step">
            <a href="javascript:;" class="layui-row left order-left">
                <div class="order-number left">3</div>
                <div class="order-text left">选择注类型3</div>
            </a>
            <div class="order-line"></div>
        </div>
        <div style="margin-left:80px;">
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
			<p>选择注册类型3内容部分</p>
		</div>
		<div id="floor4" class="order-module layui-row order-step">
            <a href="javascript:;" class="layui-row left order-left">
                <div class="order-number left">4</div>
                <div class="order-text left">选择注4</div>
            </a>
            <div class="order-line"></div>
        </div>
        <div style="margin-left:80px;">
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
			<p>选择注册类型4内容部分</p>
		</div>
		<div id="floor5" class="order-module layui-row order-step">
            <a href="javascript:;" class="layui-row left order-left">
                <div class="order-number left">5</div>
                <div class="order-text left">选择注册类型5</div>
            </a>
            <div class="order-line"></div>
        </div>
        <div style="margin-left:80px;">
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			<p>选择注册类型5内容部分</p>
			
		</div>
	</div>

<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$.fn.titleScrollTop = function(opt){
var opts = {
    target : '.order-left', //需要定位的类名
    className : 'active', //滚动到顶部时添加的类名
    hideTarget : '.order-line',//置顶后需要隐藏的类名
    beforeTopStyle:{
        position:'relative',
        left:'auto',
        marginLeft:'auto',
    },
    topedStyle : {
        position:'fixed',
        left:'0',
        marginLeft:'0',
    }
}

var settings = $.extend({},opts,opt);

var that = this;
var M = {};
M.titleHeight = parseInt($(that).css('height')); //标题的高度
M.className = '.' + that[0].classList.value.replace(/ /g,'.'); //标题模块的classname


M.init = function(){
    M.clickScrollTop();
    M.scrollTopFun();
},

//点击置顶功能
M.clickScrollTop = function(){
    that.delegate(settings.target,'click',function(){
        var _self = this;
        var scrollTop = $(this).parent().offset().top;
        $('html,body').animate({
            scrollTop : scrollTop - $(_self).parent().index(M.className) * M.titleHeight
        },200)
    })
},

M.scrollTopFun = function(){
//滚动置顶功能
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        var eles = that;
        $.each(eles,function(index,ele){

            if(ele.offsetTop < scrollTop + M.titleHeight*index){
                if(($(eles[index-1]).length > 0) && (!$(eles[index]).hasClass(settings.className))){
                    $(eles[index-1]).addClass(settings.className);
                }
                //定位到顶部
                settings.topedStyle.top = M.titleHeight*index;
                $(ele).find(settings.target).css(settings.topedStyle);
                //此为标题分割线显示
                $(ele).find(settings.hideTarget).hide();
            }else{
                //删除灰度效果
                $(eles[index-1]).removeClass(settings.className);
                //恢复为默认效果
                settings.beforeTopStyle.top = (opt.beforeTopStyle.top ? opt.beforeTopStyle.top : 'auto');
                $(ele).find(settings.target).css(settings.beforeTopStyle)
                //此为标题分割线显示
                $(ele).find(settings.hideTarget).show();
            }
        })
    })
}
M.init();
}    
//标题置顶功能
$(".order-module").titleScrollTop({
	target : '.order-left', //需要定位的类名
	className : 'active', //滚动到顶部时添加的类名
	hideTarget : '.order-line',//置顶后需要隐藏的类名
	beforeTopStyle:{    //滚动到顶部前的样式  top值默认已存在，如果传入top则替换掉默认的top值
		position:'relative',
		left:'auto',
		marginLeft:'auto',
	},
	topedStyle : {      //滚动到顶部后的样式 top值默认已存在，如果传入top则替换掉默认的top值
		position:'fixed',
		left:'50%',
		marginLeft:'-502px',
	}
});
</script>

</body>
</html>